<!--
 * @Author: your name
 * @Date: 2021-03-15 20:53:56
 * @LastEditTime: 2021-03-15 20:56:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edi
 * @FilePath: \study\js\面试题\数组计算.html
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <p>EventBus</p>
        <button id="box">点击</button>
        <button id="box1">点击1</button>
        <script>
            // class EventBus {
            //     constructor() {
            //         this.events = new Map();
            //     }
            //     on(name, cb) {
            //         console.log('on() ...');
            //         this.events.set(name, cb);
            //     }
            //     emit(name, params) {
            //         this.events.get(name)(params);
            //     }
            // }

            class EventBus{
                constructor(){
                    this.events= new Map()
                }
                on(name,cb){
                    this.events.set(name,cb)
                }
                emit(name,args){
                    this.events.get(name).apply(this,[...arguments].slice(1))
                }
            }

            class EventBus {
                constructor() {
                    this.events = new Map();
                }
                on(name, cb) {
                    console.log('on() ...');
                    this.events.set(name, cb);
                }
                emit(name, params) {
                    // this.events.get(name)(params);
                    this.events.get(name).apply(this, [...arguments].slice(1));
                }
            }

            class EventBus {
                constructor() {
                    this.subs = {};
                }

                on(name, cb) {
                    if (!this.subs[name]) {
                        this.subs[name] = [];
                    }
                    this.subs[name].push(cb);
                    return this;
                }

                emit(name, ...args) {
                    if (this.subs[name]) {
                        this.subs[name].forEach((item) => {
                            item.apply(this, args);
                        });
                    }
                }

                once(name, cb) {
                    const func = (...args) => {
                        this.off(name, func);
                        cb.apply(this, args);
                    };
                    this.on(name, func);
                }

                off(name, cb) {
                    if (!cb) {
                        this.subs[name] = null;
                    } else {
                        this.subs[name] = this.subs[name].filter((item) => item != cb);
                    }
                }
            }

            var bus = new EventBus();

            bus.on('sleep', function (params) {
                console.log('sleep', params, arguments);
            });
            bus.on('sleep1', function (params) {
                console.log('sleep1', params, arguments);
            });

            bus.emit('sleep', 6);
            bus.emit('sleep1', 777);
            bus.emit('sleep1', 777);

            box.addEventListener('click', function (params) {
                console.log('box click ...');
                bus.emit('sleep', Date.now(), 1, 2, 3);
            });
            box1.addEventListener('click', function (params) {
                console.log('box click ...');
                bus.emit('sleep', Date.now().toString().substr(8), 11, 12, 13);
            });
        </script>
    </body>
</html>
